<template>
    <div class="container">

        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">

                <!-- 基本搜索+功能按钮 -->
                <el-form ref="searchForm1" :inline="true" :model="searchForm" size="medium" label-width="">
                    <el-card class="table_tool_bar_wrap" shadow="never">
                        <div class="base_wrap mb10">
                            <div class="left">
                                <el-form-item label="订单日期" prop="dateAttrOrder">
                                    <el-radio-group v-model="searchForm.dateAttrOrder" @change="handleChangeDateAttrOrder" size="small">
                                        <el-radio-button label="">全部</el-radio-button>
                                        <el-radio-button :label="0">今天</el-radio-button>
                                        <el-radio-button :label="1">昨天</el-radio-button>
                                        <el-radio-button :label="2">最近7天</el-radio-button>
                                        <el-radio-button :label="3">最近30天</el-radio-button>
                                        <el-radio-button :label="4">本月</el-radio-button>
                                        <el-radio-button :label="5">本年</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-date-picker
                                        size="small"
                                        v-model="dateRangeOrder"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd"
                                        clearable
                                        style="width: 280px">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </div>
                        <div class="base_wrap mb10">
                            <div class="left">
                                <el-form-item label="记录日期" prop="dateAttrRecord">
                                    <el-radio-group v-model="searchForm.dateAttrRecord" @change="handleChangeDateAttrRecord" size="small">
                                        <el-radio-button label="">全部</el-radio-button>
                                        <el-radio-button :label="0">今天</el-radio-button>
                                        <el-radio-button :label="1">昨天</el-radio-button>
                                        <el-radio-button :label="2">最近7天</el-radio-button>
                                        <el-radio-button :label="3">最近30天</el-radio-button>
                                        <el-radio-button :label="4">本月</el-radio-button>
                                        <el-radio-button :label="5">本年</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-date-picker
                                        size="small"
                                        v-model="dateRangeRecord"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd"
                                        clearable
                                        style="width: 280px">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="base_wrap mb10">
                            <div class="left">
                                <el-form-item label="快捷搜索" prop="keyword">
                                    <el-input placeholder="" v-model="searchForm.keyword" clearable size="small"/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="small">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="small">重置</el-button>
                            </div>
                            <div class="right">
                                <el-button @click="handleExpose()" type="primary" size="small" icon="el-icon-delete">清算</el-button>
                                <!-- <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete" :disabled="selectionRows.length == 0">删除</el-button> -->
                            </div>
                        </div>
                    </el-card>
                </el-form>

                <!-- 表格 -->
                <el-table
                    class="mt10"
                    ref="table"
                    size="medium"
                    height="560"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    show-summary
                    :summary-method="getSummaries"
                    :stripe="stripe"
                    v-loading="loading"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center" />
                    <el-table-column label="订单日期" prop="orderTime" v-if="isHideColumn('orderTime')" align="left" show-overflow-tooltip width="160"/>
                    <el-table-column label="订单编号" prop="orderSn" v-if="isHideColumn('orderSn')" align="left" show-overflow-tooltip width="200"/>
                    <el-table-column label="付款金额" prop="orderAmount" v-if="isHideColumn('orderAmount')" align="left" show-overflow-tooltip/>
                    <el-table-column label="总部分成金额" prop="companyCommission" v-if="isHideColumn('companyCommission')" align="left" show-overflow-tooltip/>
                    <el-table-column label="代理商名称" prop="agentName" v-if="isHideColumn('agentName')" align="left" show-overflow-tooltip/>
                    <el-table-column label="代理商分成金额" prop="agentCommission" v-if="isHideColumn('agentCommission')" align="left" show-overflow-tooltip/>
                    <el-table-column label="会员名称" prop="memberName" v-if="isHideColumn('memberName')" align="left" show-overflow-tooltip/>
                    <el-table-column label="会员分成金额" prop="memberCommission" v-if="isHideColumn('memberCommission')" align="left" show-overflow-tooltip/>
                    <el-table-column label="会员类型" prop="memberFlag" v-if="isHideColumn('memberCommission')" align="left" show-overflow-tooltip/>
                    <el-table-column label="记录时间" prop="ctime" v-if="isHideColumn('ctime')" align="left" show-overflow-tooltip width="160"/>

                    <!-- <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="200px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column> -->

                </el-table>

                <!-- 分页 -->
                <TablePagination
                    :total.sync="total"
                    :page.sync="searchForm.page"
                    :limit.sync="searchForm.limit"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"/>
            </el-card>

            <!-- 弹窗, 新增 / 修改 -->
            <AddOrUpdate ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>

        </div>
    </div>
</template>

<script>
import TableMixin from '@/mixin/TableMixin'
import TablePagination from '@/views/components/table/table-pagination'
import AddOrUpdate from './add-or-update-dialog'
export default {
    mixins: [TableMixin],
    components: {
        TablePagination,
        AddOrUpdate
    },

    data() {
        return {
            dataList: [],
            total: 0,
            loading: false,
            selectionRows: [],
            searchFlag: true,
            searchForm: {
                page: 1,
                limit: 10,
                sortColumns: 'ctime',
                sortType: 'desc',
                keyword: null,
                openId: null,
                memberId: null,
                memberName: null,
                memberCommission: null,
                agentId: null,
                agentName: null,
                agentCommission: null,
                orderTime: null,
                orderSn: null,
                orderAmount: null,
                companyCommission: null,
                remarks: null,
                ctime: null,
                dateAttrOrder: '',
                dateAttrRecord: '',
                dateRangeOrder: null,
                dateRangeRecord: null,
            },
            dateRangeOrder: null,
            dateRangeRecord: null,
        }
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.getDataList()
        })
    },

    methods: {


        /**
         * 新增或编辑
         */
        handleAddOrUpdateVisible(id) {
            // 表单窗口
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },

        /**
         * 删除
         */
        async handleDelete(row) {
            let ids = []
            if (row) {
                ids.push(row.id)
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push(item.id)
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要删除的记录！', type: 'info' });
            } else {
                const confirm = await this.$confirm('确定要删除？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/mall/fmsreportcommision/delete',
                        method: 'POST',
                        data: ids
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            }
        },

        /**
         * 获取表格数据
         */
        async getDataList() {
            if(this.dateRangeOrder && this.dateRangeOrder.length > 0) {
                this.searchForm.dateAttrOrder = ''
                this.searchForm.dateRangeOrder = this.dateRangeOrder.join(',')

                this.searchForm.dateAttrRecord = ''
            } else {
                this.searchForm.dateRangeOrder = null
            }

            if(this.dateRangeRecord && this.dateRangeRecord.length > 0) {
                this.searchForm.dateAttrRecord = ''
                this.searchForm.dateRangeRecord = this.dateRangeRecord.join(',')

                this.searchForm.dateAttrOrder = ''
            } else {
                this.searchForm.dateRangeRecord = null
            }

            this.loading = true
            const res = await this.$http({
                url: '/mall/fmsreportcommision/page',
                method: 'GET',
                params: this.searchForm
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data.records || []
                this.total = res.data.total
            }
            this.loading = false
        },

        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (column.property === 'orderSn') {
                    sums[index] = '总金额';
                    return;
                }
                const values = data.map(
                    item =>
                    column.property === 'orderAmount' ||
                    column.property === 'memberCommission' ||
                    column.property === 'agentCommission' ||
                    column.property === 'companyCommission' ? Number(item[column.property]) : 0
                );
                if (!values.every(value => isNaN(value))
                    && (
                        column.property === 'orderAmount' ||
                        column.property === 'memberCommission' ||
                        column.property === 'agentCommission' ||
                        column.property === 'companyCommission'
                    )) {

                    let sumTotal = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);

                    sums[index] = sumTotal.toFixed(2) + ' 元'
                } else {
                    sums[index] = '';
                }
            });
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            });
            return sums;
        },

        /**
         * 清算，从会员交易流水中获取交易数据汇总到分成报表
         */
        async handleExpose() {
            this.loading = true
            const res = await this.$http({
                url: '/mall/fmsreportcommision/expose',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.getDataList()
            }
            this.loading = false
        },

        handleChangeDateAttrOrder() {
            this.dateRangeOrder = null
            this.searchForm.dateRangeOrder = null

            this.dateRangeRecord = null
            this.searchForm.dateRangeRecord = null

            this.searchForm.dateAttrRecord = ''

            this.getDataList()
        },

        handleChangeDateAttrRecord() {
            this.dateRangeOrder = null
            this.searchForm.dateRangeOrder = null

            this.dateRangeRecord = null
            this.searchForm.dateRangeRecord = null

            this.searchForm.dateAttrOrder = ''

            this.getDataList()
        },

        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.$refs.searchForm1.resetFields()
            this.$refs.searchForm2.resetFields()
        }

    }

}
</script>

<style lang="scss" scoped>

</style>
